<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <style type="text/css">
      div{border:solid 1px black;padding: 10px;margin: 10px;}
    </style>
	</head>
	<body>
    <div id="app">
      <h1>{{title}}</h1>
      <p>我是：{{name}}</p>
      <c></c>
    </div>
	</body>
  <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
  
  <template id="kx">
    <div>
      <h2>我是：{{name}}</h2>
      <p>我有什么：</p>
      <child1></child1>
      <child2></child2>
    </div>
  </template>
  <template id="yx">
    <div>
      <h3>我是：{{name}}</h3>
      <p>我有什么：</p>
    </div>
  </template>
  
  <template id="yz">
    <div>
      <h3>我是：{{name}}</h3>
      <p>我有什么：{{a}}</p>
      <p>我拿到了儿子的：{{b}}</p>
      <child :abc="a" v-on:myeve="getData"></child>
    </div>
  </template>
  
  <template id="ql">
    <div>
      <h4>我是：{{name}}</h4>
      <p>我有什么：{{a}}</p>
      <p>收到了父级的：{{abc}}</p>
    </div>
  </template>
  
  
  
  
  <script type="text/javascript">
    // 父传子
    // 0. 准备好要传递的数据
    // 1. 在父组件调用子组件的位置,给子组件添加绑定属性,属性名就是将来子组件要接收的数据名,属性值就是父组件要发给子组件的数据
    // 2. 在子组件的实例内部,通过props接收父组件发送数据,props默认数组格式
    
    // 子传父
    // 0. 准备好要发送的数据
    // 1. 在父组件调用子组件的位置,给子组件添加自定义事件(自定义事件名不能使用现有名称)
    // 2. 在父组件实例内部定义事件处理方法，方法的的参数会接收子组件的数据
    // 3. 在子组件的实例内部,使用this.$emit(自定义事件名, 数据)的方式触发自定义事件,并发送数据
    
    
    let temp1 = {
      template:"#ql",
      data(){
        return {
          name:"乾隆",
          a:"手机"
        }
      },
      props:["abc"],
      created(){
        this.$emit("myeve", this.a)
      }
    }
    let temp2 = {
      template:"#yx",
      data(){
        return {
          name:"胤祥",
          a:"大众"
        }
      }
    }
    let temp3 = {
      template:"#yz",
      data(){
        return {
          name:"雍正",
          a:"黄浦区的房子",
          b:""
        }
      },
      components:{
        child: temp1
      },
      methods:{
        getData(v){
          console.log(v);
          this.b = v;
        }
      }
    }
    let temp4 = {
      template:"#kx",
      data(){
        return {
          name:"康熙",
          a:"翡翠白菜"
        }
      },
      components:{
        child1: temp2,
        child2: temp3
      }
    }
    
    var vm = new Vue({
      el:"#app",
      data:{
        title:"hello component",
        name:"努尔哈赤",
        a:"江山"
      },
      components:{
        c:temp4
      }
    })

    // 努尔哈赤
    //   康熙
    //     雍正
    //       乾隆
    //     胤祥
      
  </script>
</html>
